<template>
	<div v-show="showPage">
		<div style="border-bottom: 1px solid #ddd;">
			<h3>数据源</h3>
		</div>
		<div>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>数据源ID</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="id"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>名称</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="name"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>表</label></el-col>
				<el-col :span="8">
					<el-select size="mini" v-model="tableName" :filterable="true">
						<el-option v-for="item in tableList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>where条件</label></el-col>
				<el-col :span="8">
					<el-input size="mini" type="textarea" v-model="whereClause"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>排序条件</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="orderBy"></el-input>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "DataSourceConfigPage",
		props: ["scope"],
		data() {
			return {
				showPage: false,
				tableList: [],
				id: "",
				name: "",
				tableName: "",
				whereClause: "",
				orderBy: "",
			}
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this, "detailreportdesigner/initDataSourceConfigPage?code=" + this.scope["code"]).then(
					function(response) {
						if (response.data.code == 1) {
							that.tableList = response.data.tableList;
							var dataSourceConfig = response.data.dataSourceConfig;
							if (dataSourceConfig != null) {
								that.id = dataSourceConfig.id;
								that.name = dataSourceConfig.name;
								that.tableName = dataSourceConfig.tableName;
								that.whereClause = dataSourceConfig.whereClause;
								that.orderBy = dataSourceConfig.orderBy;
							}
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			setVisible(visible) {
				this.showPage = visible;
				if (visible) {
					if (this.tableList.length == 0) {
						this.init();
					}
				}
			},
			getReturnData() {
				var data = {
					"id": this.id,
					"name": this.name,
					"tableName": this.tableName,
					"whereClause": this.whereClause,
					"orderBy": this.orderBy
				};
				return data;
			},
			getPreviousPage() {
				return undefined;
			},
			getNextPage() {
				return "displayFieldConfigPage";
			},
			isCompletedPage() {
				return false;
			}
		},
	}
</script>

<style>
</style>
